<template>
  <div class="header">
    <!-- 顶部导航栏 -->
    <div class="top">
      <div class="container">
        <div class="loginList" v-if="!showUser">
          <p>欢迎来到尚品汇！</p>
          <p class="hoverActive"><router-link to="/login">登录</router-link></p>
          <span class="sep">|</span>
          <p class="hoverActive"><router-link to="/register">注册</router-link></p>
        </div>
        <div class="loginList" v-else>
          <p>尚品汇欢迎您！</p>
          <p>{{showUser}}</p>
          <span class="sep">|</span>
          <p class="hoverActive" @click="loginOut">退出登录</p>
        </div>
        <div class="typeList">
          <p class="hoverActive"><router-link to="/center">我的订单</router-link></p>
          <span class="sep">|</span>
          <p><router-link class="hoverActive" to="/cart">我的购物车</router-link></p>
          <span class="sep">|</span>
          <p>我的尚品汇</p>
          <span class="sep">|</span>
          <p>尚品汇会员</p>
          <span class="sep">|</span>
          <p>企业采购</p>
          <span class="sep">|</span>
          <p>关注尚品汇</p>
          <span class="sep">|</span>
          <p>合作招商</p>
          <span class="sep">|</span>
          <p>商家后台</p>
        </div>
      </div>
    </div>

    <!-- 底部logo 搜索区 -->
    <div class="bottom">
      <!-- <router-link to="/home"> -->
      <div class="logo">
        <router-link to="/home">
          <img src="./images/logo.png" alt="" />
        </router-link>
      </div>
      <!-- </router-link> -->
      <div class="search">
        <el-input
          ref="elInput"
          placeholder="请输入搜索内容"
          prefix-icon="el-icon-search"
          v-model="keyWord"
          @change="goSearch"
        ></el-input>
        <div class="searchBtn" @click="goSearch">搜索</div>
      </div>
    </div>
  </div>
</template>


<script>
import {reqLoginOut} from "@/utils/api"
export default {
  name: "Header",
  data() {
    return {
      keyWord: "",
    };
  },
  computed: {
    showUser() {
      return this.$store.state.ModuleUser.nickName;
    }
  },
  methods: {
    goHome() {},
    goSearch() {
      if (this.keyWord == "") return this.$message({message: '请输入搜索内容', type: 'error'});
      // 将所有路由参数合并
      let location = {
        name: 'Search',
        query: this.$route.query,
        params: {keyword: this.keyWord || undefined}
      }
      // 搜索函数触发后获取新数据是清空搜索框里的值并失去焦点
      this.keyWord = ''
      this.$refs.elInput.blur()
      this.$router.push(location)
      this.$bus.$emit('searchHandel', {...location.query, ...location.params})
    },
    // 退出登录
    loginOut() {
      reqLoginOut().then((res) => {
        // 移除本地缓存
        localStorage.removeItem("token");
        localStorage.removeItem("nickName")
        // 改变仓库中的值
        this.$store.commit("REMOVETOKEN");
        this.$store.commit("REMOVENCIKNAME");
        this.$router.push({path: "/login"})
      },(err) => {
        console.log(err)
        return Promise.reject(new Error(err))
      })
    }
  },

  beforeDestroy () {
    this.$bus.$off('searchHandel')
  }

};
</script>

<style lang="less" scoped>
.header {
  .top {
    min-width: 1226px;
    height: 40px;
    line-height: 40px;
    background-color: #333;

    .container {
      width: 1226px;
      margin: 0 auto;
      font-size: 12px;
      color: #b0b0b0;
    }

    .loginList {
      float: left;

      .hoverActive:hover,
      .hoverActive:hover a {
        cursor: pointer;
        color: #fff;
      }

      p:first-child {
        margin-left: 0;
      }
    }

    .typeList {
      float: right;
    }

    .sep {
      float: left;
    }

    p {
      float: left;
      margin: 0 4px;
      padding: 0 4px;

      a {
        color: #b0b0b0;
      }
    }
  }

  .bottom {
    height: 106px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .logo {
      line-height: 106px;
    }

    .search {
      height: 100%;
      width: 380px;
      position: relative;

      .searchBtn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        width: 60px;
        height: 40px;
        text-align: center;
        border-left: 1px solid #dcdfe6;
        line-height: 40px;
        color: #999;
        // background: #409eff;
      }

      .searchBtn:hover{
        background:#409eff;
        color: #fff;
        border-left: 1px solid #409eff;
        cursor: pointer;
      }

      .el-input {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;

      }
    }
  }
}
        
</style>